<template>
  <page-main>
    <anchor id="buttonCool">酷 八Ten</anchor>
    <bg>
      <button-cool />
      <button-cool title="Hello World" color="#2980b9" />
      <button-cool title="On My God" color="#16a085" />
    </bg>

    <anchor id="flashButton">流光按钮</anchor>
    <bg>
      <button-flash>Hello</button-flash>
      <button-flash>World</button-flash>
      <button-flash>Wubbalubbadubdub</button-flash>
    </bg>

    <anchor id="nenoButton">霓虹按钮</anchor>
    <bg height="14rem">
      <button-neno>Neno Button</button-neno>
      <button-neno color="#d63031">Hello</button-neno>
      <button-neno color="#fd79a8">World</button-neno>
    </bg>

    <anchor id="vue3Card">vue3官网卡片按钮</anchor>
    <bg bgColor="#fff">
      <card-1 />
      <card-1 title="Vue 4" />
      <card-1 title="Vue 5" />
    </bg>

    <anchor id="card3D">3D卡片</anchor>
    <bg bgColor="#badc58">
      <card-3-d bgColor="#1abc9c" />
      <card-3-d bgColor="#f1c40f" />
      <card-3-d bgColor="#e74c3c" />
      <card-3-d bgColor="#8e44ad" />
    </bg>

    <anchor id="card3D2">3D砖头</anchor>
    <bg>
      <card-3-d-2 bgColor="#2ecc71" title="权" />
      <card-3-d-2 bgColor="#3498db" title="倾" />
      <card-3-d-2 bgColor="#e74c3c" title="朝" />
      <card-3-d-2 bgColor="#8e44ad" title="野" />
    </bg>
    <anchor id="card3D3">3D砖头2</anchor>
    <bg>
      <card-3-d-3 bgColor="#2ecc71" title="求" />
      <card-3-d-3 bgColor="#3498db" title="钱" />
      <card-3-d-3 bgColor="#e74c3c" title="若" />
      <card-3-d-3 bgColor="#8e44ad" title="渴" />
    </bg>
    <anchor id="cardImg">图片卡片</anchor>
    <bg bgColor="#333844">
      <card-pokemon bgImg="/img/fireDragon.png" />
      <card-ht bgImg="/img/fuding.png" />
      <card-ht bgImg="/img/walila.png" />
    </bg>

    <anchor id="bgGradient">渐变背景</anchor>
    <div style="height: 20rem">
      <bg-gradient />
    </div>

    <anchor id="bgPikachu">皮卡丘CSS背景</anchor>
    <div class="center" style="height: 20rem">
      <bg-pikachu />
    </div>

    <anchor id="loadingStripe">条纹漏斗</anchor>
    <bg height="4rem">
      <loading-1 />
    </bg>

    <anchor id="springMenu"> 弹簧菜单</anchor>
    <div style="height: 20rem">
      <menu-spring />
    </div>

    <anchor id="animateMenu">动画菜单</anchor>
    <bg bgColor="#ffb457">
      <menu-bar />
    </bg>

    <anchor id="breathClock">呼吸时钟</anchor>
    <bg>
      <clock-breath />
    </bg>

    <anchor id="clockAmazing">漂漂亮亮时钟</anchor>
    <div style="height: 30rem">
      <clock-amazing />
    </div>

    <anchor id="threeGod">三幻神</anchor>
    <bg>
      <garish-three-god />
    </bg>

    <!-- <anchor id="worldTree">世界之树</anchor>
      <div style="width 500px; height 600px">
        <garish-world-tree />
      </div> -->

    <anchor id="checkbox1">svg动画复选框</anchor>
    <bg>
      <input-checkbox-svg />
      <input-checkbox-svg title="你好" color="#e67e22" />
      <input-checkbox-svg title="我好难啊" color="#9b59b6" />
    </bg>

    <anchor id="cpCheckBox">codePen复选框</anchor>
    <bg bgColor="#de8797">
      <transparent id="cp1" />
      <change-color id="cp2" />
      <yes-no id="cp3" />
      <gravity id="cp4" />
    </bg>

    <anchor id="range">codePen滑动条</anchor>
    <bg bgColor="#fff">
      <range />
    </bg>

    <anchor id="progressCircle">svg环形进度条</anchor>
    <bg height="6rem">
      <progress-circle />
      <progress-circle color="#1abc9c" number="0.5" />
      <progress-circle color="#2980b9" number="0.8" />
      <progress-circle color="#8e44ad" number="1" />
    </bg>

    <anchor id="slideShow">普通轮播图</anchor>
    <bg bgColor="#bdc3c7">
      <slide-show />
    </bg>

    <anchor id="bilibiliBanner">bilibili秋</anchor>
    <bg bgColor="#fff">
      <bilibili-banner />
    </bg>
  </page-main>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Bg from "@/components/Bg.vue";
import Anchor from "@/components/Anchor.vue";

import BgGradient from "@/components/css/BgGradient.vue";
import ButtonCool from "@/components/css/ButtonCool.vue";
import ButtonFlash from "@/components/css/ButtonFlash.vue";

import Loading1 from "@/components/css/Loading1.vue";
import MenuSpring from "@/components/css/MenuSpring.vue";
import ClockBreath from "@/components/css/ClockBreath.vue";
import GarishThreeGod from "@/components/css/GarishThreeGod.vue";
import Card1 from "@/components/css/Card1.vue";
import BgPikachu from "@/components/css/BgPikachu.vue";
// import GarishWorldTree from "@/components/css/GarishWorldTree.vue";
import Card3D from "@/components/css/Card3D.vue";
import Card3D2 from "@/components/css/Card3D2.vue";
import Card3D3 from "@/components/css/Card3D3.vue";
import ClockAmazing from "@/components/css/ClockAmazing.vue";
import ButtonNeno from "@/components/css/ButtonNeno.vue";
import InputCheckboxSvg from "@/components/css/InputCheckboxSvg.vue";
import PageMain from "@/components/PageMain.vue";
import transparent from "@/components/css/codePenInputCheckbox/Transparent.vue";
import ChangeColor from "@/components/css/codePenInputCheckbox/ChangeColor.vue";
import YesNo from "@/components/css/codePenInputCheckbox/YesNo.vue";
import Gravity from "@/components/css/codePenInputCheckbox/Gravity.vue";

import Range from "@/components/css/Range.vue";
import ProgressCircle from "@/components/css/ProgressCircle.vue";

import CardPokemon from "@/components/css/CardHolo/CardPokemon.vue";
import CardHt from "@/components/css/CardHolo/CardHt.vue";
import MenuBar from "@/components/css/MenuBar.vue";

import SlideShow from "@/components/css/SlideShow.vue";

import BilibiliBanner from "@/components/css/BilibiliBanner.vue";

export default defineComponent({
  components: {
    Bg,
    ButtonCool,
    ButtonFlash,
    Anchor,
    Loading1,
    BgGradient,
    MenuSpring,
    ClockBreath,
    GarishThreeGod,
    Card1,
    BgPikachu,
    // GarishWorldTree,
    Card3D,
    Card3D2,
    Card3D3,
    ClockAmazing,
    ButtonNeno,
    InputCheckboxSvg,
    PageMain,
    transparent,
    ChangeColor,
    YesNo,
    Gravity,
    Range,
    ProgressCircle,
    CardPokemon,
    CardHt,
    MenuBar,
    SlideShow,
    BilibiliBanner,
  },
});
</script>
<style lang="scss" scoped></style>
